<template>
    <el-dialog title="编辑已加入平台" width="600px" :before-close="handleClose" :visible.sync="is_edit_join_group">
        <el-tree class="dialog-form" :default-expanded-keys="check_list" ref="edit-join-group-tree" :data="sys_department_tree" :props="props" show-checkbox check-strictly node-key="id"></el-tree>
        <div class="handle-button">
            <el-button @click="handleClose">取消</el-button>
            <el-button @click="onSubmit" type="primary">确定</el-button>
        </div>
    </el-dialog>
</template>

<script>
import group from "@/api/group.js";
import { mapGetters } from "vuex";

export default {
    name: "edit-group-dialog",
    props: [ "gid" ,"is_edit_join_group", "check_list"],
    computed: {
        ...mapGetters("department1", ["sys_department_tree"])
    },
    data() {
        return {
            props: {
                children: "children",
                label: "text",
                value: "id"
            }
        };
    },
    methods: {
        handleClose() {
            this.$refs['edit-join-group-tree'].setCheckedKeys([]);
            this.$emit("update:is_edit_join_group", false);
        },
        onSubmit() {
            let arr = this.$refs["edit-join-group-tree"].getCheckedKeys();
            if (arr.length === 0) {
                this.$message.error("请选择部门");
                return;
            }
            group
                .editMyJoinGroup({departmentIds: arr, gid: this.gid})
                .then(res => {
                    this.$message({
                        type: "success",
                        message: "编辑成功!"
                    });
                    this.$store.dispatch("group/getJoinGroupList");
                })
                .catch(err => {
                    this.$message.error(err);
                });
            this.handleClose();
        }
    },
    watch: {
        check_list(newVal) {
            this.$refs['edit-join-group-tree'].setCheckedKeys(newVal);
        }
    }
};
</script>

<style>
.handle-button {
    text-align: center;
    margin-top: 30px;
}
</style>
